<template>
  <div id="app">
    <h1>根组件-{{ count }}</h1>
    <!-- v-model不能绑定props，同样的，不能绑定Vuex里面的state -->
    <!-- :value + @input -->
    <!-- <input type="text" v-model="count"> -->
    <input type="text" :value="count" @change="hangdleCount">
    <add-item></add-item>
    <hr>
    <sub-item></sub-item>
    <h1>
      <p>不借助辅助函数  {{ $store.getters.doubleCount }}</p>
      <p>getter, mapGetters {{ doubleCount }} - {{ listLength }}</p>
      <p>{{ otherCount }}</p>
    </h1>
    <button @click="pushList(6)">list push one</button>
    <hr>
    <p>user模块的username：{{ $store.state.user.username }}</p>
    <p>user模块的age：{{ $store.state.user.age }}</p>
    <!-- 辅助函数的方式获取state -->
    <p>user模块的hobby：{{ hobby }}</p>
    <p>user模块的age：{{ age }}</p>
  </div>
</template>

<script>
import AddItem from './components/add-item.vue'
import SubItem from './components/sub-item.vue'
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'app',
  computed: {
    // 根级别的辅助函数
    ...mapState(['count']),
    ...mapGetters(['doubleCount', 'listLength', 'otherCount']),

    // 子模块的状态映射
    // 如果以子模块的映射来获取state，必须要在模块中加一个属性namespaced
    ...mapState('user', ['hobby', 'age'])

    // 子模块获取state数据
    // 1. $store.state.模块名.xxx
    // 2. ...mapState('模块名',['xxx','yyy'])  ==>
    //   ==> 如果要以mapState映射的方式获取，一定要记得给模块加namespaced命名空间
  },
  data: function () {
    return {

    }
  },
  methods: {
    // mutation写了辅助函数，可以直接this.changeNum调用
    ...mapMutations(['changeNum', 'pushList']),
    // changeNum(){
    //   this.$store.commit('changeNum')
    // }

    // 如果是对象的形式， 属性名是改后的组件里面使用的方法名，后面的属性值，是store中mutation方法名
    // ...mapMutations({ setNum: 'changeNum' }),
    // setNum(){
    //   this.$store.commit('changeNum', 额外参数)
    // }

    // 把store里面的mutation方法映射到组件的方法上了
    // changeNum (obj) {
    //   this.$store.commit('changeNum', obj)
    // },
    // 要修改Vuex中的state数据，状态，只能唯一提交mutaion
    hangdleCount (e) {
      // 校验不是很规范，我们知道就行~~
      console.log(+e.target.value)

      // 原生的方式
      // this.$store.commit('changeNum', {
      //   type: 'change',
      //   num: +e.target.value
      // })

      // 辅助函数的形式 payload传了一个对象
      this.changeNum({
        type: 'change',
        num: +e.target.value
      })
    }
  },
  components: {
    AddItem,
    SubItem
  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>
